<template>
  <div id="cesiumContainer"></div>
  <!-- <div id="loadingOverlay"><h1>Loading...</h1></div> -->
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted, ref } from "vue";
// import { init } from "./pages/load1.js";
import { init } from "./pages/load1.js";

// import HelloWorld from "./components/HelloWorld.vue";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODEzYWY1ZS01MGJmLTQ4MjgtODZkMS1kZjAxNGQ5ZmMzN2EiLCJpZCI6MzM5NzY4LCJpYXQiOjE3NTc0MTU1Mzl9.oxR9taXpWquY9mBiJaCcpfB65s3HeayXze07FU8qFvg";
  init();
 

  // const imageryLayer = new Cesium.ImageryLayer(provider);
  // viewer.imageryLayers.add(imageryLayer);
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}

#loadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.9;
  width: 100%;
  height: 100%;
}
</style>
